<template>
  <a-card style="margin-top:-2px" :bordered="false">
    <div class="">
      <a-form >
        <!--查询条件 start-->
        <a-row class="form-row" >
          <a-col :span="6" :offset="1">
            <a-form-item
              label="报销单号"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol">
              <a-input style="width:210px" v-model="queryParam.bxdh"/>
            </a-form-item>
          </a-col>
          <a-col :span="6" :offset="1">
            <a-form-item
              label="报销类型"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol">
              <a-select
                placeholder="请选择"
                style="width:210px"
                v-model="queryParam.bxlxCode"
              >
                <a-select-option v-for="item in bxlxInfo" :key="item.codeValue" :value="item.codeValue" >{{ item.codeName }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6" :offset="1">
            <a-form-item
              label="结算方式"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol">
              <a-select
                placeholder="请选择"
                style="width:210px"
                v-model="queryParam.jsfsCode"
              >
                <a-select-option v-for="item in jsfsInfo" :key="item.codeValue" :value="item.codeValue" >{{ item.codeName }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6" :offset="1">
            <a-form-item
              label="填报人"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol">
              <a-input style="width:210px" v-model="queryParam.crtName"/>
            </a-form-item>
          </a-col>
          <a-col :span="6" :offset="1">
            <a-form-item
              label="报销状态"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol">
              <a-select
                placeholder="请选择"
                style="width:210px"
                v-model="queryParam.bxztCode"
              >
                <a-select-option v-for="item in bxztInfo" :key="item.codeValue" :value="item.codeValue" >{{ item.codeName }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6" :offset="1">
            <a-form-item
              label="签发日期"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol">
              <a-range-picker format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" v-model="queryParam.qfrqArr"/>
            </a-form-item>
          </a-col>
        </a-row>
        <!--查询条件 end-->
        <!--操作按钮 start -->
        <a-row :gutter="24" algin="center" style="margin-top:10px" >
          <a-col :md="12">
            <span style="float:right" class="table-page-search-submitButtons">
              <a-button type="primary" @click="search">查询</a-button>
              <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
            </span>
          </a-col>
          <a-col :md="11" >
            <span class="table-page-search-submitButtons">
              <a-button type="primary" style="margin-left: 8px;float:right" @click="exportExcel()" :loading="loading" v-action:export>导出</a-button>
            </span>
            <span class="table-page-search-submitButtons">
              <a-button
                v-if="roleIds.indexOf('4') !== -1"
                type="primary"
                style="margin-left: 8px;float:right"
                @click="modelMethod('approveAll',record)"
                :loading="loading"
                v-action:export>审批/打款</a-button>
              <a-button
                v-if="roleIds.indexOf('4') === -1"
                type="primary"
                style="margin-left: 8px;float:right"
                @click="modelMethod('approveAll',record)"
                :loading="loading"
                v-action:export>审批</a-button>
            </span>
          </a-col>
        </a-row>
        <!--操作按钮 end -->
      </a-form>
    </div>
    <s-table
      class="text-overflow"
      ref="stable"
      size="default"
      :columns="columns"
      :data="loadData"
      style="margin-top:10px"
      :scroll="{ x: 150 }"
      :alert="{ show: true, clear: true }"
      :rowSelection="{ selectedRowKeys: this.selectedRowKeys, onChange: this.onSelectChange }"
    >
      <span slot="action" slot-scope="text, record">
        <a @click="modelMethod('detail',record)">详情</a>
        <a-divider type="vertical" />
        <a v-if="record.bxzt !== '6'" @click="modelMethod('approve',record)">审批</a>
        <a v-if="record.bxzt === '6'" @click="modelMethod('approve',record)">打款</a>
        <!--<a-divider type="vertical" />
        <a @click="modelMethod('del',record)" v-action:delete>删除</a>-->
      </span>
    </s-table>
    <!-- 弹出框 -->
    <a-modal
      :title="operate=='detail'?'详情':operate=='edit'?'编辑':'新增'"
      :width="1200"
      v-model="modelVisible"
      @ok="handleOk"
      :destroyOnClose="true"
      :confirmLoading="confirmLoading"
    >
      <a-form :form="form">
        <a-row class="form-row" >
          <a-col :span="10" :offset="1">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="报销单号" >
              <a-input v-model="selectInfo.bxdh" :disabled="operate=='detail'?'disabled':false"/>
            </a-form-item>
          </a-col>
          <a-col :span="10" :offset="1">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="报销类型" >
              <a-input v-model="selectInfo.bxlxName" :disabled="operate=='detail'?'disabled':false"/>
            </a-form-item>
          </a-col>
          <a-col :span="10" :offset="1">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="费用合计" >
              <a-input v-model="selectInfo.fyhj" :disabled="operate=='detail'?'disabled':false"/>
            </a-form-item>
          </a-col>
          <a-col :span="10" :offset="1">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="结算方式" >
              <a-input v-model="selectInfo.jsfsName" :disabled="operate=='detail'?'disabled':false"/>
            </a-form-item>
          </a-col>
          <a-col :span="10" :offset="1">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="银行卡号" >
              <a-input v-model="selectInfo.yhkh" :disabled="operate=='detail'?'disabled':false"/>
            </a-form-item>
          </a-col>
          <a-col :span="10" :offset="1">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="银行名称" >
              <a-input v-model="selectInfo.yhmc" :disabled="operate=='detail'?'disabled':false"/>
            </a-form-item>
          </a-col>
          <a-col :span="10" :offset="1">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="报销事由" >
              <a-input v-model="selectInfo.bxsy" :disabled="operate=='detail'?'disabled':false"/>
            </a-form-item>
          </a-col>
          <a-col :span="10" :offset="1">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="备注" >
              <a-input v-model="selectInfo.bz" :disabled="operate=='detail'?'disabled':false"/>
            </a-form-item>
          </a-col>
          <a-col :span="10" :offset="1">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="签发日期" >
              <a-input v-model="selectInfo.qfrq" :disabled="operate=='detail'?'disabled':false"/>
            </a-form-item>
          </a-col>
          <a-col :span="10" :offset="1">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="填报时间" >
              <a-input v-model="selectInfo.cjsj" :disabled="operate=='detail'?'disabled':false"/>
            </a-form-item>
          </a-col>
          <a-col :span="10" :offset="1">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="填报人" >
              <a-input v-model="selectInfo.crtName" :disabled="operate=='detail'?'disabled':false"/>
            </a-form-item>
          </a-col>
          <a-col :span="10" :offset="1">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="报销状态" >
              <a-input v-model="selectInfo.bxztName" :disabled="operate=='detail'?'disabled':false"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-table
        ref="table"
        size="default"
        :columns="columnsDetail"
        :dataSource="loadDataDetail"
        :alert="false"
        :rowKey="(record) => record.id"
        :scroll="{ x: xScroll}"
      ></a-table>
    </a-modal>

    <a-modal
      :title="'审批'"
      :width="800"
      v-model="modelVisibleApprove"
      :destroyOnClose="true"
      :confirmLoading="confirmLoadingApprove"
    >
      <span slot="footer">
        <a-button v-if="dk" type="primary" @click="handleOkApprove">
          打款
        </a-button>
        <a-button v-if="!dk" type="primary" @click="handleOkApprove">
          通过
        </a-button>
        <a-button type="danger" @click="handleCancelApprove">
          驳回
        </a-button>
      </span>
      <a-form :form="form">
        <a-row class="form-row" >
          <a-col :span="20">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="意见" >
              <a-textarea v-model="selectInfo.yj"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </a-card>
</template>
<script>

import { STable } from '@/components'
import { query, method, download } from '@/api/admin'
import moment from 'moment'
import { mapGetters } from 'vuex'

export default {
  components: {
    STable
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  data () {
    return {
      visible: false,
      dk: false,
      form: this.$form.createForm(this),
      // 查询参数
      queryParam: {},

      inAdd: false,
      inEdit: false,
      inDetail: false,
      selectedRowKeys: [],
      selectedRows: [],
      roleIds: [],

      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return query('/wb/ribs' + '/approveQuery', 'GET', Object.assign(parameter, this.queryParam))
          .then(res => {
            return res.result
          })
      },
      // 表头
      columns: [
        {
          title: '报销单号',
          dataIndex: 'bxdh',
          ellipsis: true,
          width: '165px'
        },
        {
          title: '报销类型',
          dataIndex: 'bxlxName'
        },
        {
          title: '费用合计',
          dataIndex: 'fyhj'
        },
        {
          title: '结算方式',
          dataIndex: 'jsfsName'
        },
        {
          title: '银行卡号',
          dataIndex: 'yhkh',
          ellipsis: true
        },
        {
          title: '银行名称',
          dataIndex: 'yhmc',
          ellipsis: true
        },
        {
          title: '报销事由',
          dataIndex: 'bxsy',
          ellipsis: true
        },
        {
          title: '备注',
          dataIndex: 'bz',
          ellipsis: true
        },
        {
          title: '签发日期',
          dataIndex: 'qfrq',
          ellipsis: true
        },
        {
          title: '填报时间',
          dataIndex: 'cjsj',
          ellipsis: true
        },
        {
          title: '填报人',
          dataIndex: 'crtName'
        },
        {
          title: '报销状态',
          dataIndex: 'bxztName'
        },
        {
          title: '操作',
          width: '100px',
          dataIndex: 'action',
          fixed: 'right',
          scopedSlots: { customRender: 'action' }
        }
      ],
      columnsDetail: [],
      // 表头
      columnsClf: [
        {
          title: '出发时间',
          key: 'gcfsj',
          dataIndex: 'gcfsj',
          customRender: this.formatterTime
        },
        {
          title: '出发城市',
          key: 'gcfd',
          dataIndex: 'gcfd'
        },
        {
          title: '目的城市',
          key: 'gmdd',
          dataIndex: 'gmdd'
        },
        {
          title: '出行方式',
          key: 'gcxfs',
          dataIndex: 'gcxfs'
        },
        {
          title: '交通费用',
          key: 'gjtf',
          dataIndex: 'gjtf'
        },
        // {
        //   title: '回程出发时间',
        //   key: 'bcfsj',
        //   dataIndex: 'bcfsj',
        //   customRender: this.formatterTime
        // },
        // {
        //   title: '回程出发地',
        //   key: 'bcfd',
        //   dataIndex: 'bcfd'
        // },
        // {
        //   title: '回程目的地',
        //   key: 'bmdd',
        //   dataIndex: 'bmdd'
        // },
        // {
        //   title: '回程出行方式',
        //   key: 'bcxfs',
        //   dataIndex: 'bcxfs'
        // },
        // {
        //   title: '回程交通费',
        //   key: 'bjtf',
        //   dataIndex: 'bjtf'
        // },
        {
          title: '住宿天数',
          key: 'zsts',
          dataIndex: 'zsts'
        },
        {
          title: '住宿方式',
          key: 'zsfs',
          dataIndex: 'zsfs'
        },
        {
          title: '住宿人数',
          key: 'zsrs',
          dataIndex: 'zsrs'
        },
        {
          title: '住宿金额',
          key: 'zsje',
          dataIndex: 'zsje'
        },
        {
          title: '出差补助',
          key: 'ccbz',
          dataIndex: 'ccbz'
        },
        {
          title: '住宿补助',
          key: 'zsbz',
          dataIndex: 'zsbz'
        },
        {
          title: '其他费用',
          key: 'qtfy',
          dataIndex: 'qtfy'
        },
        {
          title: '其他费用说明',
          key: 'qtfysm',
          dataIndex: 'qtfysm'
        },
        {
          title: '备注',
          key: 'bz',
          dataIndex: 'bz'
        },
        {
          title: '报销事由',
          key: 'bxsy',
          dataIndex: 'bxsy'
        }
      ],
      columnsJtf: [
        {
          title: '报销事由',
          key: 'sy',
          dataIndex: 'sy'
        },
        {
          title: '费用日期',
          key: 'fyrq',
          dataIndex: 'fyrq',
          customRender: this.formatterTime
        },
        {
          title: '出发地',
          key: 'cfd',
          dataIndex: 'cfd'
        },
        {
          title: '目的地',
          key: 'mdd',
          dataIndex: 'mdd'
        },
        {
          title: '金额',
          key: 'je',
          dataIndex: 'je'
        },
        {
          title: '备注',
          key: 'bz',
          dataIndex: 'bz'
        }
      ],
      columnsCyf: [
        {
          title: '招待事由',
          key: 'zdsy',
          dataIndex: 'zdsy'
        },
        {
          title: '客户名称',
          key: 'khmc',
          dataIndex: 'khmc'
        },
        {
          title: '客户类别',
          key: 'khlb',
          dataIndex: 'khlb'
        },
        {
          title: '招待地点',
          key: 'zddd',
          dataIndex: 'zddd'
        },
        {
          title: '随同人员',
          key: 'stry',
          dataIndex: 'stry'
        },
        {
          title: '金额',
          key: 'je',
          dataIndex: 'je'
        },
        {
          title: '备注',
          key: 'bz',
          dataIndex: 'bz'
        }
      ],
      columnsQtfy: [
        {
          title: '发生时间',
          key: 'fssj',
          dataIndex: 'fssj'
        },
        {
          title: '事由',
          key: 'sy',
          dataIndex: 'sy'
        },
        {
          title: '金额',
          key: 'je',
          dataIndex: 'je'
        },
        {
          title: '备注',
          key: 'bz',
          dataIndex: 'bz'
        }
      ],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      modelVisible: false, // 弹出框显示
      modelVisibleApprove: false, // 弹出框显示
      operate: 'query', // 当前操作
      selectInfo: { yj: '同意' }, // 选中的数据
      bxlxInfo: [], // 报销类型
      jsfsInfo: [], // 结算方式
      bxztInfo: [], // 报销状态
      confirmLoading: false, // Loading
      confirmLoadingApprove: false, // Loading
      url: '/wb/ribs', // ajax请求地址
      loading: false,
      loadDataDetail: [],
      xScroll: ''
    }
  },
  created () {
    this.userInfo.roles.forEach(item => {
      this.roleIds.push(item.roleId)
    })
    console.log('roleIdssssss', this.roleIds)
    // 获取报销类型
    this.getBxlx().then((res) => {
      this.bxlxInfo = res.data
    })
    // 获取结算方式
    this.getJsfs().then((res) => {
      this.jsfsInfo = res.data
    })
    // 获取报销状态
    this.getBxzt().then((res) => {
      this.bxztInfo = res.data
    })
  },
  methods: {
    // 判断多选审批是否有打款项和审批项混选，如果没有混选返回true
    checkPlus (selectRowsParam) {
      let flagDk = 0
      let flagQt = 0
      selectRowsParam.forEach(item => {
        if (item.bxzt === '6') {
          flagDk = 1
        } else {
          flagQt = 2
        }
      })
      if ((flagQt + flagDk) === 3) {
        this.$notification['info']({
          message: '打款不能和审批同时进行',
          duration: 4
        })
        return false
      }
      return true
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      this.checkPlus(selectedRows)
      /* debugger
      const selectParam = []
      const selectKeysParam = []
      const removeList = []
      if (selectedRows.length > 1) {
        selectedRows.forEach((item, index) => {
          if (item.bxzt !== '6') {
            selectParam.push(item)
            selectKeysParam.push(item.id)
          } else {
            this.$notification.open({
              message: 'Notification Title',
              description: '打款不能和审批同时进行',
              icon: <a-icon type="smile" style="color: #108ee9" />
            })
            removeList.push(index)
            // selectedRows.splice(index)
            selectedRowKeys.forEach((itemkey, indexkey) => {
              if (item.id === itemkey) {
                selectedRowKeys.splice(indexkey, 1)
              }
            })
          }
        })
        removeList.forEach(item => {
          selectedRows.splice(item, 1)
        })
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      } else {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      } */
    },
    formatterTime (val) {
      console.log(moment(val).format('YYYY-MM-DD'))
      return val ? moment(val).format('YYYY-MM-DD') : ''
    },
    // 获取报销类型
    getBxlx () {
      return query('/admin/codelist/byName?name=BXLX', 'GET', {}, {})
        .then(res => {
          return res.result
        })
    },
    // 获取结算方式
    getJsfs () {
      return query('/admin/codelist/byName?name=JSFS', 'GET', {}, {})
        .then(res => {
          return res.result
        })
    },
    // 获取报销状态
    getBxzt () {
      return query('/admin/codelist/byName?name=BXZT', 'GET', {}, {})
        .then(res => {
          return res.result
        })
    },
    /**
       * 搜索
       */
    search () {
      if (this.queryParam.qfrqArr !== undefined && this.queryParam.qfrqArr.length > 0) {
        this.queryParam.startDate = this.queryParam.qfrqArr[0]
        this.queryParam.endDate = this.queryParam.qfrqArr[1]
        // this.$delete(this.queryParam, 'qfrqArr')
      }
      const param = {}
      Object.assign(param, this.queryParam)
      this.$delete(param, 'qfrqArr')
      this.$refs.stable.loadData({}, param, {})
    },
    queryDetail (selectInfo) {
      return query('/wb/ribs/queryDetail', 'GET', selectInfo, {})
        .then(res => {
          console.log('ressss', res.result.data)
          if (res.result.type === 'clf') {
            this.columnsDetail = this.columnsClf
            this.xScroll = '2500px'
          } else if (res.result.type === 'cyf') {
            this.columnsDetail = this.columnsCyf
            this.xScroll = '500px'
          } else if (res.result.type === 'jtf') {
            this.columnsDetail = this.columnsJtf
            this.xScroll = '500px'
          } else if (res.result.type === 'qtfy') {
            this.columnsDetail = this.columnsQtfy
            this.xScroll = '500px'
          }
          this.loadDataDetail = res.result.data
        }).catch(e => {
          console.log('e', e)
        })
    },
    // 操作按钮
    modelMethod (action, selectInfo) {
      this.queryDetail(selectInfo)
      this.operate = action // 记录当前操作
      this.selectInfo = Object.assign({}, selectInfo) // 记录当前操作的数据
      const _this = this
      if (this.operate === 'del') { // 删除
        this.$confirm({
          title: '警告',
          content: `确认要删除该条记录吗?`,
          okText: '确认',
          okType: 'danger',
          cancelText: '取消',
          onOk () {
            _this.actionParam = {// 请求参数
              'url': _this.url + '/' + _this.selectInfo.id,
              'action': 'delete',
              'parameter': {},
              'data': {},
              'message': '删除成功'
            }
            // 调用请求
            method(_this.actionParam).then(res => {
              _this.$refs.stable.refresh(true)// 刷新列表
            })
          },
          onCancel: () => {
            this.$notification['info']({
              message: '取消删除操作',
              duration: 4
            })
          }
        })
      } else if (this.operate === 'approve') {
        if (this.selectInfo.bxzt === '6') {
          this.dk = true
        } else {
          this.dk = false
        }
        this.modelVisibleApprove = true // 弹出框显示
      } else if (this.operate === 'approveAll') {
        if (this.selectedRows[0].bxzt === '6') {
          this.dk = true
        } else {
          this.dk = false
        }
        if (this.checkPlus(this.selectedRows) && this.selectedRows.length !== 0) {
          this.modelVisibleApprove = true // 弹出框显示
        } else if (this.selectedRows.length === 0) {
          this.$notification['info']({
            message: '请勾选报销单据',
            duration: 4
          })
        }
      } else {
        this.modelVisible = true // 弹出框显示
      }
    },
    // 确认
    handleOk () {
      this.confirmLoading = true
      if (this.operate === 'detail') { // 详情
        this.confirmLoading = false
        // 关闭编辑框
        this.modelVisible = false
      }
      /* if (this.operate === 'add') { // 新增
        this.actionParam = {
          'url': this.url,
          'action': 'POST',
          'parameter': {},
          'data': this.selectInfo,
          'message': '新增成功'
        }
      } */
      if (this.operate === 'edit') { // 修改
        this.actionParam = {
          'url': this.url,
          'action': 'PUT',
          'parameter': {},
          'data': this.selectInfo,
          'message': '审批成功'
        }
      }
      // 调用请求
      return method(this.actionParam).then(res => {
        this.confirmLoading = false
        // 关闭编辑框
        this.modelVisible = false
        // 刷新列表
        this.$refs.stable.refresh(true)
      })
    },
    // 确认
    handleOkApprove () {
      this.confirmLoadingApprove = true
      this.selectInfo.bxyj = '1'
      let param = []
      param.push(this.selectInfo)
      if (this.operate === 'approveAll') {
        this.selectedRows.forEach((item, index) => {
          item.bxyj = '1'
          item.yj = this.selectInfo.yj
        })
        param = this.selectedRows
      }
      this.actionParam = {
        'url': this.url + '/approve',
        'action': 'PUT',
        'parameter': {},
        'data': param,
        'message': '审批成功'
      }
      // 调用请求
      return method(this.actionParam).then(res => {
        this.confirmLoadingApprove = false
        // 关闭编辑框
        this.modelVisibleApprove = false
        // 刷新列表
        this.$refs.stable.refresh(true)
      })
    },
    handleCancelApprove () {
      this.confirmLoadingApprove = true
      this.selectInfo.bxyj = '0'
      let param = []
      param.push(this.selectInfo)
      if (this.operate === 'approveAll') {
        this.selectedRows.forEach((item, index) => {
          item.bxyj = '0'
          item.yj = this.selectInfo.yj
        })
        param = this.selectedRows
      }
      this.actionParam = {
        'url': this.url + '/approve',
        'action': 'PUT',
        'parameter': {},
        'data': param,
        'message': '审批成功'
      }
      // 调用请求
      return method(this.actionParam).then(res => {
        this.confirmLoadingApprove = false
        // 关闭编辑框
        this.modelVisibleApprove = false
        // 刷新列表
        this.$refs.stable.refresh(true)
      })
    },
    exportExcel () {
      // this.loading = true
      this.actionParam = {// 请求参数
        'url': this.url + '/exportApprove',
        'parameter': this.queryParam,
        'action': 'GET',
        'data': {}
      }
      return download(this.actionParam).then(res => {
        this.downloadFile(res)
        this.loading = false
      })
    },
    /**
       * 下载
       */
    downloadFile (data) {
      if (!data) {
        return
      }
      const url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      // 获取文件名
      // download 属性定义了下载链接的地址而不是跳转路径
      link.setAttribute('download', '报销列表查询.xlsx')
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }

  }
}
</script>
<style scoped>
  .text-overflow {
    display:block;                     /*内联对象需加*/
    word-break:keep-all;           /* 不换行 */
    white-space:nowrap;          /* 不换行 */
    overflow: auto;
  }
</style>
